<template>
  <el-dialog title="关联分类"
             :visible.sync="visible1"
             :close-on-click-modal="false">
    <el-popover
      placement="top"
      width="300"
      v-model="visible2">
      <CategoryCascader @change-value="changeValue"></CategoryCascader>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="isible2 = false">取消</el-button>
        <el-button type="primary" size="mini" @click="addRelation">确定</el-button>
      </div>
      <el-button slot="reference">添加分类</el-button>
    </el-popover>
    <el-table :data="tableData">
      <el-table-column property="id" label="#" width="150"></el-table-column>
      <el-table-column property="brandName" label="品牌名" width="200"></el-table-column>
      <el-table-column property="catelogName" label="分类名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import CategoryCascader from "../common/CategoryCascader";
export default {
  components: {CategoryCascader},
  data () {
    return {
      tableData: [],
      visible1: false,
      visible2: false,
      brand: null,
      addParam: {
        brandId: 0,
        catelogId: 0,
        brandName: '',
        catelogName: ''
      }
    }
  },
  methods: {
    init (brand) {
      this.visible1 = true
      this.brand = brand
      console.log("brand",brand)
      this.$http({
        url: this.$http.adornUrl(`/product/categorybrandrelation/list/${brand.brandId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if(data && data.code === 0){
          console.log(data)
          this.tableData = data.data
          this.addParam.brandId = brand.brandId
          this.addParam.brandName = brand.name
        }
      }).catch(()=>{
        console.log("=========error==========")
        this.$message({
          type: 'error',
          message: '请求失败'
        })
      })
    },
    addRelation(){
      this.visible2 = false
      console.log("添加了", this.addParam)
      this.$http({
        url: this.$http.adornUrl('/product/categorybrandrelation/save'),
        method: 'post',
        data: this.$http.adornData(this.addParam, false)
      }).then(({res}) => {
        console.log(res)
        this.init(this.brand)
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
      })

    },
    deleteHandle(id){
      this.$confirm(`此操作将永久删除${id}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [id]
        this.$http({
          url: this.$http.adornUrl(`/product/categorybrandrelation/delete`),
          method: 'post',
          data: this.$http.adornParams(ids,false)
        }).then(({res})=>{
          console.log(res)
          this.init(this.brand)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeValue(value, checkNode){
      console.log(checkNode)
      this.addParam.catelogId = checkNode.catId
      this.addParam.catelogName = checkNode.name
    }
  }
}
</script>
